/** 
 * 1.vue3响应式数据本质
 * -在vue2.x中是通过defineProperty来实现响应式数据的
 * 在vue3.x中是通过Proxy来实现响应式数据的
 * const p = new Proxy(target, handler);
 * target: 要代理的原始对象 
 * handler: 定义哪些操作将被拦截以及如何重新定义被拦截的操作的对象
 */
// let obj = {
//   name: "ls",
//   age: 18
// };
// let state = new Proxy(obj, {
//   get(obj, key) {
//     console.log(obj, key);
//     return obj[key]
//   },
//   set(obj, key, value) {
//     console.log(obj, key, value)
//     obj[key] = value;
//     console.log("更新ui界面");
//     return true
//   }
// });

// console.log(state.name)
// state.name = "直播";
// console.log(state)

let arr = [1, 3, 5];
let state = new Proxy(arr, {
  get(obj, key) {
    console.log(obj, key);
    return obj[key]
  },
  set(obj, key, value) {
    console.log(obj, key, value)
    obj[key] = value;
    console.log("更新ui界面");
    return true
  }
});
console.log(state[1])
state.push(7)